<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
        promise
          概念：一个异步编程解决方案，用来解决回调地狱问题

          promise有三种状态：pending（初始化状态） resolved/fulfilled（成功状态） rejected（失败状态）
          创建的promise，默认是初始化状态，当调用resolve方法可以将状态改为成功状态，当调用reject方法可以将状态改为失败状态
          状态只能改变一次

          promise实例对象上有一些方法：
            then，then方法可以接受两个回调函数，
              第一个是当promise变成成功状态时触发的回调函数（也叫成功回调函数）
              第二个是当promise变成失败状态时触发的回调函数（也叫失败回调函数）
              通常情况下，then方法主要传一个回调函数，而失败通过catch去处理
            catch catch方法可以接受一个回调函数
              当promise对象变成失败状态时触发的回调函数
            finally finally方法可以接受一个回调函数
              当promise对象变成成功/失败状态时触发的回调函数

            then/catch/finally方法返回值都是一个promise对象，这个promise对象状态：
              - 如果报错了，返回失败状态
              - 如果内部函数返回一个promise对象，就看这个promise对象的状态
              - 否则就是成功状态

          Promise构造函数也有静态方法：
            Promise.resolve() 返回一个成功promise对象（也可能返回一个失败状态promise）
            Promise.reject() 返回一个失败promise对象
            Promise.all([promise1, promise2, ...]) 只有所有promise都成功才成功，只要有一个失败就失败
            Promise.race([promise1, promise2, ...]) 只返回第一个状态发生变化的promise
            Promise.allSettled([promise1, promise2, ...]) 等所有promise状态都发生变化，才会返回一个成功promise
      */
      // 1 9 2 3 5 7
      // console.log(1);
      // const p1 = new Promise((reject, resolve) => {
      //   console.log(2);
      //   reject();
      // });
      // p1.then(() => { console.log(3); })
      //   .catch(() => { console.log(4); })
      //   .then(() => { console.log(5); })
      //   .catch(() => { console.log(6); })
      //   .then(() => { console.log(7); })
      //   .catch(() => { console.log(8); })
      // console.log(9);

      // 1 2 9 3 4 6
      console.log(1);
      const p1 = new Promise((reject, resolve) => {
        console.log(2);
        reject();
      });
      p1.then(() => {
        console.log(3);
        throw new Error();
      })
        .catch(() => {
          console.log(4);
          console.log(hello);
        })
        .then(() => {
          console.log(5);
        })
        .catch(() => {
          console.log(6);
          return new Promise(() => {});
        })
        .then(() => {
          console.log(7);
        })
        .catch(() => {
          console.log(8);
        });
      console.log(9);
    </script>
  </body>
</html>
